<template>
    <div>
        <div class="head">
            <img src="http://erabbit.itheima.net/img/logo.0940ebb5.png" alt="">
            <p>欢迎登陆</p>
            <p class="toho"><a @click="toHome">进入首页 &gt;</a></p>
        </div>
        <div class="main">
            <div class="l-main">
              <el-tabs v-model="activeName" :stretch="true">
                <el-tab-pane label="账户登录" name="code">
                  <el-form
                    :model="loginForm"
                    :rules="rules"
                    ref="pswdForm"
                    class="demo-ruleForm"
                  >
                    <el-form-item prop="username">
                      <el-input
                        v-model="loginForm.username"
                        autocomplete="off"
                        placeholder="账号"
                      ></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                      <el-input
                        type="password"
                        v-model="loginForm.password"
                        autocomplete="off"
                        placeholder="密码"
                      ></el-input>
                    </el-form-item>
                    <el-checkbox v-model="checked">我已同意《隐私条款》和《服务条款》</el-checkbox>
                  </el-form>
                </el-tab-pane>
                <el-tab-pane label="扫码登录" name="pswd">
                  <img src="@/assets/ewm.jpg" class="ewm" alt="">
                </el-tab-pane>
              </el-tabs>
            <el-button type="primary" @click="handleLogin">登 录</el-button>
          </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"LoginView",
    data() {
    return {
      activeName: "code",
      checked:true,
      loginForm: {
        username: "xiaotuxian001",
        password: "123456",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 20,
            message: "长度在 3 到 20 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 5,
            max: 10,
            message: "长度在 5 到 10 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
    async created(){
        let res =await this.$http.postSyan({account:this.loginForm.username,password:this.loginForm.password})
        console.log(res);
    },
    methods:{
      toHome(){
        this.$router.push('/home');
      },
        handleLogin(){
            // console.log("登陆");
            this.login();
        },
        async login() {
            let _data = {
                account: this.loginForm.username,
                password: this.loginForm.password,
            };
            let res=await this.$http.postSyan(_data);
            console.log(res);
            if(this.checked){
              this.$message({
                message: "恭喜你，登录成功！",
                    type: "success",
                });
                // 存储请求页面数据的token
                localStorage.setItem("token", res.data.result.token);
                // 存储用户登录的token
                localStorage.setItem("user", res.data.result.account);
                //编程式导航
                this.$router.push("/home");
            }else{
              this.$message({
                message:"请勾选选项",
              })
            }
            
        },
    }
}
</script>

<style lang="less" scoped>
    .head{
        display: flex;
        img{
            width:250px;
            height:100px;
            margin-left:300px;
            margin-top:20px;
        }
        p{
            margin-top:70px;
            font-size:26px;
            color:#666;
            margin-left:20px;
        }
        .toho{
          margin-left:500px;
          a{
            font-size:22px;
          }
        }
    }
    .main{
        width:100%;
        height:500px;
        background:url('http://erabbit.itheima.net/img/login-bg.696efec3.png') no-repeat;
        background-size:cover;
        margin-top:40px;
        position:relative;
        .l-main{
            width:360px;
            height:400px;
            background:#fff;
            position:absolute;
            top:60px;
            left:1050px;
            flex: 1;
            padding: 0 40px;
            .ewm{
              width:150px;
              height:150px;
              margin-left:100px;
              margin-bottom:10px;
            }
        }
    }
    .el-tabs {
        margin-top: 70px;
    }
    .el-button {
        width: 100%;
        margin-top:20px;
    }
</style>